<template>
  <div id="nav">
    <div class="head">
        <div class="zou">
            <canvas id="background"></canvas>
            <div class="iconfont icon-qq2"> QQ</div>
            <img src="../../public/images/1.jpg" alt="">
        </div>
        <div class="you">
            <div class="iconfont">&#xe61a;</div>
            <div>—</div>
            <div>×</div>
        </div>
    </div>
    <div class="left">
        <input-dom 
        rule="^\d{1,10}$"
        err_message="请输入正确用户名"
        ico="iconfont icon-qq1" type="text" placeholder="qq账号/邮箱/手机号"
        @valueChanged="setUsername"
        ></input-dom>
    </div>
    <div class="right">
        <input-dom 
        rule="^\d{3,10}$"
        err_message="请输入正确的密码"
        ico="iconfont icon-suotou" type="text" placeholder="请输入密码"
        @valueChanged="setPassword"
        ></input-dom>
    </div>
    <div class="contents">
        <span><input type="checkbox">  自动登录</span>
        <span><input type="checkbox">  记住密码</span>
        <span>找回密码</span>
    </div>
    <div class="btnWrapper">
        <router-link to="/regin">注册账号</router-link>
        <Authbtn btnText="登录" @clickBtn="handle"></Authbtn>
        <span class="iconfont icon-qrcode"></span>
    </div>
   
  </div>
</template>

<script>
import '../../animate/css/htmleaf-demo.css'
import '../../animate/css/normalize.css'
import '../../animate/js/background.js'
import inputDom from '../components/inputDom.vue'
import Authbtn from '../components/Authbtn.vue'

export default {
    data() {
        return {
            name:"",
            pass:""
        }
    },
    methods:{
        handle:function() {   
            if (!this.name || !this.pass) {
                this.$toast.fail('请输入完整信息')
                return
            }     
            this.$axios({
                url:"http://liangwei.tech:3000/login",
                method:'post',
                data:{
                    username:this.name,
                    password:this.pass
                }
            }).then((res)=>{
                console.log(res.data);
                
                const {status,message,data} = res.data
                if (status ==401) {
                    this.$toast.fail(message)
                }else {
                    this.$toast.success(message)
                    localStorage.setItem('token',data.token)
                    localStorage.setItem('userId',data.user.id)
                    // location.href = 'http://localhost:8080/#/user'
                    this.$router.push("/user")
                }
            })
        } ,
        setUsername(username) {
            this.name = username
        },
        setPassword(password) {
            this.pass = password
        }         
    },
    components:{
        inputDom,
        Authbtn
    }
}
</script>

<style lang="less" scoped>
.iconfont {
    font-family: 'iconfont';
    font-size: 20px;
}
#nav {
    width: 360px;
    margin: auto;
    margin-top: 100px;
    border: 1px solid #00f;
}
.zou {
    position: relative;
    width: 340px;
    height: 100px;
    padding:10px 0px 0px 20px;
}
.you {
    position:absolute;
    top:8px;
    right: 0px;
    display: flex;
    
    div {
        margin-left: 15px;
        cursor: pointer;
        color:#fff;
    }
}
#background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 360px;
    height: 100px;
}  

.head {
    position: relative;
    width: 340px;
    height: 100px;
    margin-bottom: 50px;
    .icon-qq2 {
        color: #fff;
    }
    img {
        position: absolute;
        left:50%;
        transform: translateX(-50%);
        bottom: -40px;
        display: block;
        height: 80px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border:3px solid #00f;
    }
}
.left,
.right {
    display: flex;
    justify-content: center;
    line-height: 34px;
}
.left {
    padding-top: 0;
}
.closeWrapper {
    padding: 0px 10px;
    .iconicon-test {
        font-size: 18px;
    }
}
.btnWrapper {
    position: relative;
    width: 360px;
    text-align: center;
    margin-top: 15px;
    a {
        position: absolute;
        font-size: 12px;
        left:10px;
        bottom: 20px;
      	color: #2c3e50;
    }
    .icon-qrcode {
        position: absolute;
        right:10px;
        bottom: 20px;
        font-size: 24px;
    }
}
.contents {
    margin-top: 20px;
    width: 226px;
    height: 18px;
    margin: auto;
    display: flex;
    justify-content: space-between; 
    padding-left: 6px;
    span {
        font-size: 13px;
        cursor: pointer;
    }
}
</style>